<template>

    <div class="tac">
        <div v-for="(item, index) in type" class="demo" @click="mounted(index)">
          <div class="item" :class="{active: typeid === index}">
            <div class="item_i">{{item.typeName}}</div>
          </div>
        </div>
    </div>

</template>

<script>
  export default {
    name: "List",
    data() {
      return {
        typeid: 0
      }
    },
    props: {
      typeId :"",
      type: ""
    },
    updated () {
      this.typeid = this.typeId;
      // console.log(this.typeId)
    },
    methods: {
      mounted(index) {
        this.typeid = index;
        this.$emit("index",index)
      }
    }
  }
</script>

<style scoped>
  .tac {
    width: 100%;
  }
  .demo {
    margin-right: 5px;
    padding: 5px;
    border-right: 1px solid rgb(220, 223, 230);
    display: flex;
    flex-direction: column;
  }
  .active {
    background-color: rgb(236, 245, 255);
    color: rgb(64, 158, 255);
  }
  .item {
    width: 100%;
    height: 50px;
    border-radius: 2px
  }
  .item:hover {
    background-color: rgb(236, 245, 255);
    color: rgb(64, 158, 255);
  }
  .item_i{
    margin: 15px 18px 0;
  }
</style>
